<script lang="ts" setup>
import { Snackbar } from '@varlet/ui'
import router from '../../router'
import { ref } from 'vue'
const goBack = () => {
    router.push('/wode');
  Snackbar({
    // content: '返回',
    position: 'top'
  })
};

let fs = ref(772);
</script>
<template>
<var-app-bar title="我的钱包" color="#fff" text-color="black">
    <template #left>
        <var-button
            round
            text
            color="transparent"
            text-color="black"
            @click="goBack"
        >
            <var-icon name="chevron-left" :size="24" />
        </var-button>
    </template>
</var-app-bar>
    <var-row>
        <var-col :span="17">
            <span style="font-size:18px;margin-left:10px;margin-top:10px;"><b>我的钱包</b></span>
        </var-col>
        <var-col :span="7">
            <div style="float: right;font-size: 12px;border-radius: 15px; border:1px solid #999;padding:5px 10px;margin-top: 10px;margin-left: 10px;">
                美团信任分{{fs}}
            </div>
        </var-col>
    </var-row>
    <div style="background:#ffd100;padding: 20px;margin: 10px;border-radius: 8px;">
        <div style="height:50px;">
            <div style="float:left;width: 30%;">
                <p style="width:100%;font-size: 12px;">余额(元)</p>
                <p style="width:100%;font-size: 32px;">0.00</p>
            </div>
            
            <div style="float:right;line-height: 50px;">
                <var-button size="small"  text outline type="primary" text-color="black">查看余额</var-button>
            </div>
        </div>   
    </div>
    <div style="padding: 10px;margin: 10px;border-radius: 8px;border: 1px solid #eeeeee;">
        <div style="height:80px;">
            <div style="float:left;width: 30%;">
                <span>借钱</span>
                <p style="font-size: 32px;margin-top: 5px;">200,00</p>
                <p style="font-size: 12px;">最高可借</p>
            </div>
            <div style="float:right;line-height: 80px;">
                <var-button size="small"  color="#ffd100" text-color="black" style="margin-right:10px;">查看余额</var-button>
            </div>
        </div>
    </div>
    <div style="margin: 10px;display: flex;">
        <div style="border:1px solid #eeeeee;margin-right:5px;width: 49%;padding: 10px 10px 20px 10px;border-radius: 8px;">
            <p><span>账单</span><var-icon name="chevron-right" style="float:right;color: #d4d4d4;" /></p>
            <p style="font-size: 32px;margin-top: 10px;">388.54</p>
            <p style="font-size: 12px;">本月消费</p>
        </div>
        <div style="border:1px solid #eeeeee;margin-left:5px;width: 49%;padding: 10px 10px 20px 10px;border-radius: 8px;">
            <p><span>笔笔返</span><var-icon name="chevron-right" style="float:right;color: #d4d4d4;" /></p>
            <p style="font-size: 32px;margin-top: 10px;">0.06元</p>
            <p style="font-size: 12px;">最高可领</p>
        </div>
    </div>
    
</template>
<style lang="scss" scoped>
.var-elevation--3{
  box-shadow: none !important;
}
</style>